<template>
	<gracePage :customHeader="false">
		<!-- 页面主体 -->
		<view slot="gBody" class="grace-body">
			<view class="marginTop" @tap="returnFn"><text class="grace-grids-icon grace-icons main-font-color">&#58902;</text></view>
			<view class="marginTop grace-flex-center p-5"><image src="../../static/login.png" mode="widthFix" class="logo"></image></view>
			<form @submit="loginNow" class="grace-form" style="margin-top:60rpx;">
				<view class="grace-form-item grace-border-b">
					<view class="grace-pnper"><text class="grace-form-label">用户账号</text></view>
					<view class="grace-form-body"><input v-model="phoneno" class="grace-form-input" name="pn" placeholder="账号" /></view>
				</view>
				<view class="grace-form-item grace-border-b">
					<view class="grace-pnper"><text class="grace-form-label">用户密码</text></view>
					<view class="grace-form-body"><input type="password" v-model="psw" class="grace-form-input" name="ps" placeholder="密码" /></view>
				</view>
				<view class="grace-form-item">
					<text class="grace-form-label">短信验证码</text>
					<view class="grace-form-body"><input type="number" class="grace-form-input" v-model="yzm" name="yzm" placeholder="验证码" /></view>
					<view style="width:163px;">
						<text class="login-sendmsg-btn my-bg grace-white grace-border-radius" @tap="getVCode">{{ vcodeBtnName }}</text>
					</view>
				</view>
				<view class="grace-margin-top">
					<button form-type="submit" type="default" class=" grace-border-radius my-bg">
						<text class="grace-white grace-button" style="font-size: 20px;">注册</text>
					</button>
				</view>
				<view class="grace-form-item">
					<view @tap="pageJumps('/pages/login/login')"><text class="grace-form-label grace-blue">去登录</text></view>
					<view class="grace-form-body"></view>
					<view><!-- <text class="grace-form-label grace-blue" >忘记密码?</text> --></view>
				</view>
				<view class="py-3"></view>
				<view class="grace-form-item pt-5">
					<view class="grace-form-body" style="padding:20rpx 0;">
						<checkbox-group name="aihao" class="grace-wrap grace-flex-center grace-flex" @change="checkboxChange"> 
							<label class="grace-check-item grace-flex grace-flex-vcenter"><checkbox :checked="checkedStatus"></checkbox></label>
							<view class="grace-flex pt-1">我已阅读<navigator url="/pages/login/agreement?status=1" style="color: #3A86F9;">用户协议</navigator>和<navigator url="/pages/login/agreement?status=2" style="color: #3A86F9;">隐私政策</navigator></view>
						</checkbox-group>
					</view>
				</view>
			</form>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '../../graceUI/components/gracePage.vue';
var graceChecker = require('../../graceUI/jsTools/graceChecker.js');
import {mapMutations ,mapActions} from 'vuex';

export default {
	data() {
		return {
			pnpre: 0,
			vcodeBtnName: '获取验证码',
			countNum: 60,
			countDownTimer: null,
			phoneno: '',
			psw: '',
			yzm: ''
		};
	},
	methods: {
		...mapMutations(['login']),
		...mapActions(['getUserInfo']),
		pageJumps(url) {
			uni.navigateTo({
				url: url,
				animationType: 'fade-in',
				animationDuration: 600
			});
		},
		loginWithWx: function() {
			uni.showToast({
				title: '请完善登录功能',
				icon: 'none'
			});
		},
		changePre: function(e) {
			this.pnpre = e.detail.value;
		},
		checkboxChange(e){
			this.checkedStatus = !this.checkedStatus;
			console.log(this.checkedStatus,e,11)
		},
		async loginNow(e) {
			// 表单验证
			var rule = [
				{ name: 'pn', checkType: 'phoneno', errorMsg: '请填写正确的手机号' },
				{ name: 'ps', checkType: 'string', checkRule: '6,12', errorMsg: '密码需要保持在6-12位' },
				{ name: 'yzm', checkType: 'string', checkRule: '4,6', errorMsg: '请正确填写短信验证码' }
			];
			var formData = e.detail.value;
			var checkRes = graceChecker.check(formData, rule);
			// 验证通过
			let _this = this;
			if (checkRes) {
				if(!this.checkedStatus){
					return uni.showToast({ title: '请勾选用户协议与隐私协议', icon: 'none' });
				}
				// uni.showToast({ title: "请观察控制台", icon: "none" });
				let options = {
					act: 'register',
					mobile: this.phoneno,
					password: this.psw,
					code: this.yzm
				};
				console.log('options', options);

				let data = await this.$HTTP.postDx('/api/api.php', options);
				// 直接登录
				let loginOptions = {
					act: 'login',
					mobile: _this.phoneno,
					password: _this.psw
				};
				let loginFo = await this.$HTTP.postDx('/api/api.php', loginOptions).then(res => {
					_this.login(res.info);
					// 获取新的数据
					this.getUserInfo();
					// 刷新购物车
					uni.$emit('updateCart');
					// 页面跳转到个人中心
					uni.vibrateLong();
					uni.switchTab({
						url: '/pages/home/home'
					});
				});
			} else {
				uni.showToast({ title: graceChecker.error, icon: 'none' });
			}
		},
		getVCode: function() {
			var myreg = /^[1][0-9]{10}$/;
			if (!myreg.test(this.phoneno)) {
				uni.showToast({ title: '请正确填写手机号码', icon: 'none' });
				return false;
			}
			// 手机号码为 :  this.phoneno
			// vcodeBtnName 可以阻止按钮被多次点击 多次发送 return 会终止函数继续运行
			if (this.vcodeBtnName != '获取验证码' && this.vcodeBtnName != '重新发送') {
				return;
			}
			this.vcodeBtnName = '发送中...';
			// 与后端 api 交互，发送验证码 【自己写的具体业务代码】
			// 假设发送成功，给用户提示
			uni.showToast({ title: '短信已发送，请注意查收', icon: 'none' });
			// 倒计时
			this.countNum = 60;
			this.countDownTimer = setInterval(
				function() {
					this.countDown();
				}.bind(this),
				1000
			);

			//调用短信验证
			this.$HTTP.postDx('/api/api.php', { act: 'get_code', mobile: this.phoneno }).then(data => {
				console.log(111111, data);
			});
		},
		returnFn: function(e) {
			uni.navigateBack({
				delta: 1
			});
		},
		countDown: function() {
			if (this.countNum < 1) {
				clearInterval(this.countDownTimer);
				this.vcodeBtnName = '重新发送';
				return;
			}
			this.countNum--;
			this.vcodeBtnName = this.countNum + '秒重发';
		},
		reg: function() {
			wx.showToast({ title: '注册页面类似登录，请自行完善 (:', icon: 'none' });
		}
	},
	components: {
		gracePage
	}
};
</script>
<style>
.marginTop {
	margin-top: 100rpx;
}
.logo {
	width: 250rpx;
	height: 68rpx;
}
.login-sendmsg-btn {
	height: 60rpx;
	padding: 10rpx;
	text-align: center;
	background-image: linear-gradient(to right, #1ca376, #54bf95);
	line-height: 60rpx;
	font-size: 26rpx;
}
.grace-pnper {
	width: 168rpx;
}
.my-bg {
	background-image: linear-gradient(to right, #1ca376, #54bf95);
}
.my-color {
	color: #54bf95;
}
.grace-form-label {
	width: 168rpx;
}
.grace-form-input {
	text-align: left;
}
.grace-form-item {
	padding: 10rpx 0;
}
.grace-login-three-items {
	width: 88rpx;
	height: 88rpx;
	line-height: 88rpx;
	font-size: 60rpx;
	color: #54bf95;
	text-align: center;
	margin: 10rpx;
}
</style>
